// import React from 'react';
// import { Router, Route, Link } from 'react-router-dom';
//
// const App = React.createClass({
//     render() {
//         return (
//             <div>
//                 <h1>App</h1>
//                 <ul>
//                     <li><Link to="/about">About</Link></li>
//                     <li><Link to="/inbox">Inbox</Link></li>
//                 </ul>
//                 {this.props.children}
//             </div>
//         )
//     }
// })
//
// const About = React.createClass({
//     render() {
//         return <h3>About</h3>
//     }
// })
//
// const Inbox = React.createClass({
//     render() {
//         return (
//             <div>
//                 <h2>Inbox</h2>
//                 {this.props.children || "Welcome to your Inbox"}
//             </div>
//         )
//     }
// })
//
// const Message = React.createClass({
//     render() {
//         return <h3>Message {this.props.params.id}</h3>
//     }
// })
//
// React.render((
//     <Router>
//         <Route path="/" component={App}>
//             <Route path="about" component={About} />
//             <Route path="inbox" component={Inbox}>
//                 <Route path="messages/:id" component={Message} />
//             </Route>
//         </Route>
//     </Router>
// ), document.body)
//
// // ReactDOM.render(
// //     <Game />,
// //     document.getElementById('root')
// // );
//
// // 状态提升
// // 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”
// // const scaleNames = {
// //     c: 'Celsius',
// //     f: 'Fahrenheit'
// // };
// // function toCelsius(fahrenheit) {
// //     return (fahrenheit - 32) * 5 / 9;
// // }
// // function toFahrenheit(celsius) {
// //     return (celsius * 9 / 5) + 32;
// // }
// // function tryConvert(temperature, convert) {
//     // const input = parseFloat(temperature);
// //     if (Number.isNaN(input)) {
// //         return '';
// //     }
// //     const output = convert(input);
// //     const rounded = Math.round(output * 1000) / 1000;
// //     return rounded.toString();
// // }
// // class TemperatureInput extends React.Component {
// //     constructor(props){
// //         super(props);
// //         this.handleChange = this.handleChange.bind(this);
// //         this.state = {temperature: ''};
// //     }
// //     handleChange(e){
// //         // this.setState({temperature: e.target.value});
// //         this.props.onTemperatureChange(e.target.value);
// //     }
// //     render(){
// //         // const temperature = this.state.temperature;
// //         const temperature = this.props.temperature;
// //         const scale = this.props.scale;
// //         return(
// //             <fieldset>
// //                 <legend>Enter temperature in {scaleNames[scale]}:</legend>
// //                 <input type="text"
// //                        value={temperature}
// //                        onChange={this.handleChange}
// //                 />
// //             </fieldset>
// //         )
// //     }
// // }
// // class Calculator extends React.Component{
// //     constructor(props){
// //         super(props);
// //         this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
// //         this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
// //         this.state = {temperature: '', scale: 'c'};
// //     }
// //     handleCelsiusChange(temperature) {
// //         console.log(1)
// //         console.log(temperature)
// //         this.setState({scale: 'c', temperature});
// //     }
// //
// //     handleFahrenheitChange(temperature) {
// //         console.log(2)
// //         this.setState({scale: 'f', temperature});
// //     }
// //
// //     render(){
// //         console.log(3)
// //         const scale = this.state.scale;
// //         const temperature = this.state.temperature;
// //         const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
// //         const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
// //         return(
// //             <div>
// //                 <TemperatureInput
// //                     scale="c"
// //                     temperature={celsius}
// //                     onTemperatureChange={this.handleCelsiusChange}
// //                 />
// //                 <TemperatureInput
// //                     cale="f"
// //                     temperature={fahrenheit}
// //                     onTemperatureChange={this.handleFahrenheitChange}
// //                 />
// //                 <BoilingVerdict
// //                     celsius={parseFloat(celsius)} />
// //
// //             </div>
// //         )
// //     }
// // }
// // ReactDOM.render(
// //     <Calculator/>,
// //     document.getElementById("root")
// // )
//
// // // 状态提升
// // function BoilingVerdict(props) {
// //     if (props.celsius >= 100) {
// //         return <p>The water would boil.</p>;
// //     }
// //     return <p>The water would not boil.</p>;
// // }
// // class Calculator extends React.Component {
// //     constructor(props){
// //         super(props);
// //         this.handleChange = this.handleChange.bind(this);
// //         this.state = {temperature: ''};
// //     }
// //     handleChange(e){
// //         this.setState({temperature: e.target.value});
// //     }
// //     render(){
// //         const temperature = this.state.temperature;
// //         return(
// //             <fieldset>
// //                 <legend>Enter temperature in Celsius:</legend>
// //                 <input type="text"
// //                        value={temperature}
// //                        onChange={this.handleChange}
// //                 />
// //                 <BoilingVerdict celsius={parseFloat(temperature)}/>
// //             </fieldset>
// //         )
// //     }
// // }
// // ReactDOM.render(
// //     <Calculator/>,
// //     document.getElementById("root")
// // )
//
// // 表单
// // class NameForm extends React.Component{
// //     constructor(props){
// //         super(props);
// //         this.input = React.createRef();
// //         this.state = {
// //             // value: '',
// //             textareaValue: '',
// //             selectValue: '',
// //         };
// //         this.handleChange = this.handleChange.bind(this);
// //         this.handleChange2 = this.handleChange2.bind(this);
// //         this.handleChange3 = this.handleChange3.bind(this);
// //         this.handleSubmit = this.handleSubmit.bind(this);
// //     }
// //     handleChange(event){
// //         console.log(this.input.current.value);
// //         // this.setState({value: event.target.value});
// //     }
// //     handleChange2(event){
// //         this.setState({textareaValue: event.target.value});
// //     }
// //     handleChange3(event){
// //         this.setState({selectValue: event.target.value});
// //     }
// //     handleSubmit(event){
// //         console.log('提交的名字：',this.input.current.value,'textarea：',this.state.textareaValue,'最喜欢的风味：',this.state.selectValue);
// //         event.preventDefault();
// //     }
// //
// //     render() {
// //         return (
// //             <form onSubmit={this.handleSubmit}>
// //                 <label className='blockStyle'>
// //                     名字：
// //                     <input type="text" ref={this.input} onChange={this.handleChange} />
// //                 </label>
// //                 <label className='blockStyle'>
// //                     文章：
// //                     <textarea value={this.state.textareaValue} onChange={this.handleChange2} placeholder='请撰写一篇关于你喜欢的 DOM 元素的文章.'></textarea>
// //                 </label>
// //                 <label className='blockStyle'>
// //                     选择你喜欢的风味:
// //                     <select value={this.state.selectValue} onChange={this.handleChange3}>
// //                         <option value="grapefruit">葡萄柚</option>
// //                         <option value="lime">柠檬</option>
// //                         <option value="coconut">椰子</option>
// //                         <option value="mango">芒果</option>
// //                     </select>
// //                 </label>
// //                 <input className='blockStyle' type="submit" value="提交"/>
// //             </form>
// //         );
// //     }
// // }
// // ReactDOM.render(
// //     <NameForm/>,
// //     document.getElementById("root")
// // )
//
// // function NumberList(props) {
// //     const numbers = props.numbers;
// //     const listItems = numbers.map((number) =>
// //         <li>{number}</li>
// //     );
// //     return (
// //         <ul>{listItems}</ul>
// //     );
// // }
// //
// // const numbers = [1, 2, 3, 4, 5];
// // ReactDOM.render(
// //     <NumberList numbers={numbers} />,
// //     document.getElementById('root')
// // );
//
// // function UserGreeting(props) {
// //     return <h1>Welcome back!</h1>;
// // }
// // function GuestGreeting(props) {
// //     return <h1>Please sign up.</h1>;
// // }
// // function Greeting(props) {
// //     const isLoggedIn = props.isLoggedIn;
// //     if (isLoggedIn) {
// //         return <UserGreeting />;
// //     }
// //     return <GuestGreeting />;
// // }
// // ReactDOM.render(
// //     // Try changing to isLoggedIn={true}:
// //     <Greeting isLoggedIn={true} />,
// //     document.getElementById('root')
// // );
//
// // class Clock extends React.Component{
// //     constructor(props){
// //         super(props);
// //         this.state = {date: new Date()};
// //     }
// //     // 挂载（组件已经被渲染到DOM中后运行）
// //     componentDidMount(){
// //         this.timerID = setInterval(
// //             ()=>this.tick(),1000
// //         );
// //     }
// //     // 卸载
// //     componentWillUnmount(){
// //         clearInterval(this.timerID);
// //     }
// //     tick(){
// //         this.setState({
// //             date: new Date()
// //         });
// //     }
// //     render(){
// //         return (
// //             <div>
// //                 <h1>Hello,world!</h1>
// //                 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
// //             </div>
// //         )
// //     }
// // }
// // ReactDOM.render(
// //     <Clock/>,
// //     document.getElementById('root')
// // );
//
// // function Clock(props){
// //     return (
// //         <div>
// //             <h1>Hello,world!</h1>
// //             <h2>It is {props.date.toLocaleTimeString()}.</h2>
// //         </div>
// //     );
// // }
// // function tick(){
// //     ReactDOM.render(
// //         <Clock date={new Date()} />,
// //         document.getElementById('root')
// //     );
// // }
// // setInterval(tick, 1000);
//
// // ReactDOM.render(
// //     <h1>Hello, world!</h1>,
// //     document.getElementById('root')
// // );
// // class Square extends React.Component {
// //     constructor(props){
// //         // 每次定义其子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头
// //         super(props);
// //         this.state = {
// //           value: null,
// //         };
// //     }
// //     render() {
// //         return (
// //             <button
// //                 className="square"
// //                 onClick={() => this.props.onClick() }>
// //                 {this.props.value}
// //             </button>
// //         );
// //     }
// // }
//
// // function Square(props){
// //     return (
// //         <button className="square" onClick={props.onClick}>
// //             {props.value}
// //         </button>
// //     );
// // }
// //
// // class Board extends React.Component {
// //     renderSquare(i) {
// //         return <Square
// //             value={this.props.squares[i]}
// //             onClick={() => this.props.onClick(i)}
// //         />;
// //     }
// //     render() {
// //         return (
// //             <div>
// //                 <div className="board-row">
// //                     {this.renderSquare(0)}
// //                     {this.renderSquare(1)}
// //                     {this.renderSquare(2)}
// //                 </div>
// //                 <div className="board-row">
// //                     {this.renderSquare(3)}
// //                     {this.renderSquare(4)}
// //                     {this.renderSquare(5)}
// //                 </div>
// //                 <div className="board-row">
// //                     {this.renderSquare(6)}
// //                     {this.renderSquare(7)}
// //                     {this.renderSquare(8)}
// //                 </div>
// //             </div>
// //         );
// //     }
// // }
// //
// // class Game extends React.Component {
// //     constructor(props){
// //         super(props);
// //         this.state = {
// //             history: [{
// //                 squares: Array(9).fill(null)
// //             }],
// //             stepNumber: 0,
// //             xIsNext: true,
// //         };
// //     }
// //     handleClick(i) {
// //         // .slice() 方法创建了数组的一个副本
// //         const history = this.state.history;
// //         const current = history[history.length - 1];
// //         const squares = current.squares.slice();
// //         if(calculateWinner(squares) || squares[i]){
// //             return;
// //         }
// //         squares[i] = this.state.xIsNext ? 'X' : 'O';
// //         this.setState({
// //             history: history.concat([{
// //                 squares: squares,
// //             }]),
// //             stepNumber: history.length,
// //             xIsNext: !this.state.xIsNext,
// //         });
// //     }
// //     jumpTo(step) {
// //         this.setState({
// //             stepNumber: step,
// //             xIsNext: (step % 2) === 0,
// //         });
// //     }
// //     render() {
// //         const history = this.state.history;
// //         const current = history[this.state.stepNumber];
// //         const winner = calculateWinner(current.squares);
// //
// //         const moves = history.map((step, move) => {
// //             console.log(step,move)
// //             const desc = move ?
// //                 'Go to move #' + move :
// //                 'Go to game start';
// //             return (
// //                 <li key={move}>
// //                     <button onClick={() => this.jumpTo(move)}>{desc}</button>
// //                 </li>
// //             )
// //         })
// //         let status;
// //         if(winner){
// //             status = 'Winner：' + winner;
// //         }else{
// //             status = 'Next player：' + (this.state.xIsNext ? 'X' : 'O');
// //         }
// //         return (
// //             <div className="game">
// //             <div className="game-board">
// //             <Board
// //                 squares={current.squares}
// //                 onClick={(i) => this.handleClick(i)}
// //             />
// //             </div>
// //             <div className="game-info">
// //             <div>{status}</div>
// //             <ol>{moves}</ol>
// //             </div>
// //             </div>
// //     );
// //     }
// // }
// // function calculateWinner(squares) {
// //     const lines = [
// //         [0, 1, 2],
// //         [3, 4, 5],
// //         [6, 7, 8],
// //         [0, 3, 6],
// //         [1, 4, 7],
// //         [2, 5, 8],
// //         [0, 4, 8],
// //         [2, 4, 6],
// //     ];
// //     for (let i = 0; i < lines.length; i++) {
// //         const [a, b, c] = lines[i];
// //         if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
// //             return squares[a];
// //         }
// //     }
// //     return null;
// // }
// // // ========================================
// //
// // ReactDOM.render(
// // <Game />,
// //     document.getElementById('root')
// // );
//
//
//
import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router, Route} from 'react-router-dom';
import './index.css';
// 使用自定义路由
// 引入我们需要的模板
import Home from './pages/home/home';
import My from './pages/my/my';

/**
 * router 使用
 * 如果路径匹配，则会渲染模板，如果不匹配，则不会渲染
 * exact: 精确匹配
 */
ReactDOM.render(
    <Router>
        <React.Fragment>
            <Route path="/" component={Home} />
            <Route path="/my" component={My}/>
        </React.Fragment>
    </Router>,
    document.getElementById('root')
);